<template>
  <div class="slider-wrapper">
    <me-loading v-if="!sliders.length"></me-loading>
    <me-slider
      :data="sliders"
      :direction="direction"
      :loop="loop"
      :interval="interval"
      :pagination="pagination"
      v-else
    >
      <swiper-slide
        v-for="(item, index) in sliders"
        :key = "index">

        <a :href="item.linkUrl" class="slider-link">
          <img :src="item.picUrl" alt="" class="slider-img">
        </a>
      </swiper-slide>
    </me-slider>
  </div>
</template>

<script>
  import MeSlider from 'base/slider';
  import {swiperSlide} from 'vue-awesome-swiper';
  import {sliderOptions} from './config';
  import {getHomeSlider} from 'api/home';
  import MeLoading from 'base/loading';
  export default {
    name: 'HomeSlider',
    components: {
      MeSlider,
      swiperSlide,
      MeLoading
    },
    data() {
      return {
        direction: sliderOptions.direction,
        loop: sliderOptions.loop,
        interval: sliderOptions.interval,
        pagination: sliderOptions.pagination,
        sliders: []
      // {
      //   'linkUrl': 'https://www.imooc.com',
      //   'picUrl': require('./1.jpg')
      // },
      // {
      //   'linkUrl': 'https://www.imooc.com',
      //   'picUrl': require('./2.jpg')
      // },
      // {
      //   'linkUrl': 'https://www.imooc.com',
      //   'picUrl': require('./3.jpg')
      // }, {
      //   'linkUrl': 'https://www.imooc.com',
      //     'picUrl': require('./4.jpg')
      // }
      };
    },
    created() {
      this.getSliders();
    },
    methods: {
      // 向外暴露的更新接口，与本接口内部调用的getSliders分开，语义化更明确
      // 而且可以有更多的设置：返回值变为promise 进一步处理
      update() {
        return this.getSliders();
      },
      getSliders() {
        return getHomeSlider().then(data => {
          this.sliders = data;
        });
      }
    }
  };
</script>

<style scoped lang="scss">
  .slider-wrapper {
    height: 183px;
  }
  .slider-link{
    display: block;
  }

  .slider-link,
  .slider-img {
    width: 100%;
    height: 100%;
  }

</style>
